import React from 'react';
import { Modal, Button } from 'antd';
import cass from 'classnames';
import s from './remark.module.less';
import Avatar from '../../../components/Avatar';


class ShareModal extends React.Component {

    static defaultProps = {
        dataSource: [],
    }

    constructor(props) {
        super(props);
        const { dataSource, viewer } = props;
        const arr = dataSource.map(d => {
            if (viewer.some(v => v.userid === d.userid)) return { ...d, selected: true };
            else return d
        })
        this.state = {
            dataSource: arr,
        }
    }

    componentWillReceiveProps(nextProps) {
        const { dataSource, viewer } = nextProps;
        const arr = dataSource.map(d => {
            if (viewer.some(v => v.userid === d.userid)) return { ...d, selected: true };
            else return d
        })
        this.setState({ dataSource: arr });
    }

    onSelect = ({ userid }) => {
        const { canEdit } = this.props;
        if (!canEdit) return;
        const { dataSource } = this.state;
        const newArr = dataSource.map(v => {
            if (v.userid === userid) return { ...v, selected: !v.selected };
            else return v
        })
        this.setState({ dataSource: newArr });
    }

    onSure = () => {
        const { dataSource } = this.state;
        const viewer = [];
        dataSource.forEach(v => {
            const { selected, ...ver } = v;
            if (selected) viewer.push(ver);
        });
        this.props.onSure(viewer);
        this.props.onCancel();
    }

    render() {
        const { visible, canEdit } = this.props;
        const { dataSource } = this.state;

        return (
            <Modal
                wrapClassName={s.wrapModal}
                visible={visible}
                width={300}
                closable={false}
            >
                <div className={s.content}>
                    <div className={s.header}>{canEdit ? '请选择阶段成员' : '备注分享人'}</div>
                    <div className={s.list}>
                        {dataSource.length ? dataSource.map(v => (
                            <div key={v.userid} className={cass(s.item, 'hovergray')} onClick={() => this.onSelect(v)}>
                                {canEdit ? (
                                    <div className={s.logo}>
                                        {v.selected ? <span className="mdi mdi-checkbox-marked-circle" /> : <span className="mdi mdi-checkbox-blank-circle-outline" />}
                                    </div>
                                ) : null}
                                <Avatar username={v.username} headimage={v.headimage} />
                                <span className={s.text}>{v.username}</span>
                            </div>
                        )) : null}
                    </div>
                    <div className={s.footer}>
                        <Button onClick={this.props.onCancel}>取消</Button>
                        {canEdit ? <Button type="primary" onClick={this.onSure}>确定</Button> : null}
                    </div>
                </div>
            </Modal>
        );
    }
}

export default ShareModal